<template>
  <van-dialog
    :show="show"
    title=""
    destroyOnClose
    className="custom-dialog"
    :showConfirmButton="false"
    :showCancelButton="true"
    @cancel="beforeClose"
  >
    <div class="setAvatar_content">
      <div class="change_uesrname">
        <div class="label">{{ lang.edit_username }}</div>
        <div class="edit_name_input">
          <div class="el-input">
            <div class="el-input__wrapper" tabindex="-1">
              <input
                class="el-input__inner"
                type="text"
                autocomplete="off"
                tabindex="0"
                v-model="inputValue"
              />
            </div>
          </div>
        </div>
      </div>
      <div class="btn" v-click-move @click="save">{{ lang.edit_save }}</div>
    </div>
  </van-dialog>
</template>

<script setup lang="ts">
const lang: any = getCurrentPageLang("setting");
const props = defineProps(["show", "user"]);
const emit = defineEmits(["changeShow", "changeName"]);

const inputValue = ref("");
watch(
  () => props.show,
  (newVal) => {
    if (!newVal) return;
    inputValue.value = props.user.name;
  }
);

const beforeClose = () => {
  emit("changeShow", false);
};

const save = () => {
  emit("changeName", inputValue.value);
  beforeClose();
};
</script>

<style scoped lang="scss">
.setAvatar_content {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  color: var(--theme-neutral1);
  padding: 1rem 0.5rem;
}
.setAvatar_content .change_uesrname {
  margin-bottom: 0.8rem;
}
.setAvatar_content .label {
  margin-bottom: 0.5rem;
  font-size: 0.36rem;
  font-weight: 600;
}
.setAvatar_content .change_uesrname .edit_name_input {
  position: relative;
  margin: 0.6rem auto;
}
.el-input {
  --el-input-text-color: var(--el-text-color-regular);
  --el-input-border: var(--el-border);
  --el-input-hover-border: var(--el-border-color-hover);
  --el-input-focus-border: var(--el-color-primary);
  --el-input-transparent-border: 0 0 0 1px transparent inset;
  --el-input-border-color: var(--el-border-color);
  --el-input-border-radius: var(--el-border-radius-base);
  --el-input-bg-color: var(--el-fill-color-blank);
  --el-input-icon-color: var(--el-text-color-placeholder);
  --el-input-placeholder-color: var(--el-text-color-placeholder);
  --el-input-hover-border-color: var(--el-border-color-hover);
  --el-input-clear-hover-color: var(--el-text-color-secondary);
  --el-input-focus-border-color: var(--el-color-primary);
  --el-input-width: 100%;
  --el-input-height: var(--el-component-size);
  box-sizing: border-box;
  display: inline-flex;
  font-size: var(--el-font-size-base);
  line-height: var(--el-input-height);
  position: relative;
  vertical-align: middle;
  width: var(--el-input-width);
}
.setAvatar_content .change_uesrname .edit_name_input .el-input {
  color: var(--theme-neutral1);
  background: #2c1d31;
  border-radius: var(--border-radius);
  border: 0.03rem solid var(--border-color);
}
.el-input__wrapper {
  align-items: center;
  background-color: var(--el-input-bg-color, var(--el-fill-color-blank));
  background-image: none;
  box-shadow: 0 0 0 1px var(--el-input-border-color, var(--el-border-color))
    inset;
  cursor: text;
  display: inline-flex;
  flex-grow: 1;
  justify-content: center;
  transform: translateZ(0px);
  border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
  padding: 1px 11px;
  transition: var(--el-transition-box-shadow);
}
.setAvatar_content
  .change_uesrname
  .edit_name_input
  .el-input
  .el-input__wrapper {
  box-shadow: none;
  background: transparent;
}
.el-input__inner {
  --el-input-inner-height: calc(var(--el-input-height, 0.8rem) - 2px);
  appearance: none;
  box-sizing: border-box;
  color: var(--el-input-text-color, var(--el-text-color-regular));
  flex-grow: 1;
  font-size: 0.36rem;
  height: var(--el-input-inner-height);
  line-height: var(--el-input-inner-height);
  width: 100%;
  background: none;
  border: none;
  outline: none;
  padding: 0px;
}
.setAvatar_content
  .change_uesrname
  .edit_name_input
  .el-input
  .el-input__inner {
  color: #fff;
}
.setAvatar_content .btn {
  cursor: pointer;
  text-align: center;
  font-size: 0.4rem;
  background: linear-gradient(270deg, #e151a4 0%, #e66fc8 100%);
  border-radius: 0.9rem;
  height: 0.9rem;
  line-height: 0.9rem;
}
</style>
